<template>
	<view class="base-page">
		<view class="yangsf-m-t-20 yangsf-ratio-w-100 yangsf-flex-col-center" style="background-color: #fff;">
			<view class="yangsf-ratio-w-90">
				<u-search placeholder="姓名搜索" v-model="params.keyword" @change="search" :clearabled="true"
					:showAction="false"></u-search>
			</view>
			<view class="search-tabs">
				<u-tabs :list="tabs" @click="clickTab"></u-tabs>
			</view>
		</view>

		<view v-if="list && list.length>0" class="yangsf-padding-20 yangsf-flex-col-center">
			<view class="card_white yangsf-ratio-w-100 yangsf-m-b-20 " v-for="(item,index) in list" :key="index">
				<view class="">
					<view class="card_title">
						<view class="">
							{{item.isHide?"******":item.title}}
						</view>
						<view class="yangsf-flex-row-center" @click="setHide(index)">
							<view class="yangsf-m-r-20">
								<u-icon v-if="!item.isHide" name="/static/icon/eye.png" size="24"></u-icon>
								<u-icon v-else name="/static/icon/eye-off.png"  size="24"></u-icon>
							</view>
							<view class="">
								<u-tag v-if="item.contractStatus==1" text="待签署" plain size="mini" type="warning"></u-tag>
								<u-tag v-if="item.contractStatus==2" text="已发起" plain size="mini" type="primary"></u-tag>
								<u-tag v-if="item.contractStatus==3" text="已签约" plain size="mini" type="success"></u-tag>
								<u-tag v-if="item.contractStatus==4" text="已逾期" plain size="mini" type="error"></u-tag>
								<u-tag v-if="item.contractStatus==5" text="已完结" plain size="mini" type="info"></u-tag>
							</view>
						</view>
					</view>
					<u-line></u-line>
					<view class="card_content" @click="click(item.id)">
						<view class="yangsf-flex">
							<view class="">
								总金额
							</view>
							<view class="yangsf-m-l-20" style="color: #202020;font-size: 32rpx;">
								{{item.isHide?"***":item.totalMoney}}
							</view>
						</view>
						<view class="yangsf-flex">
							<view class="">
								合同金额
							</view>
							<view class="yangsf-m-l-20">
								{{item.isHide?"***":item.money}}
							</view>
						</view>

						<view class="yangsf-flex">
							<view class="">
								利率
							</view>
							<view class="yangsf-m-l-20">
								{{item.isHide?"**":item.moneyRate}}%
							</view>
						</view>
					</view>
				</view>
				<!-- <u-line></u-line>
				<view class="yangsf-padding-10">
					<u-grid :border="false" @click="click(item.id)" :col="1">
						<u-grid-item>
							<text class="grid-text">查看详情</text>
						</u-grid-item>
					</u-grid>
				</view> -->
			</view>
		</view>

		<u-empty :show="list.length <= 0" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
		</u-empty>
	</view>
</template>

<script>
	import {
		getContracts
	} from '@/config/api.js'
	export default {
		data() {
			return {
				params: {
					pageNumber: 1,
					keyword: '',
					status: '',
				},
				tabs: [{
					name: '全部',
					value: ''
				}, {
					name: '待签署',
					value: '1'
				}, {
					name: '已发起',
					value: '2'
				}, {
					name: '已签约',
					value: '3'
				}, {
					name: '已完结',
					value: '5'
				}],
				list: []
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			setHide(index){
				console.log("设置小眼睛 ==> {}", index);
				this.$set(this.list[index], 'isHide', !this.list[index].isHide);
			},
			getList() {
				getContracts(this.params).then(res => {
					this.list = res.data.records
				})
			},
			click(id, e) {
				console.log("点击查看详情 ==> {},{}", id, e);
				uni.$u.route('/pages/contract/share?id=' + id);
			},
			clickTab(item) {
				console.log("点击了状态搜索 ==> {}", item);
				this.params.status = item.value
				this.getList()
			},
			search(value) {
				console.log("搜索框 ==> {}", value);
				this.getList()
			}
		}
	}
</script>

<style scoped>
	.card_title {
		padding: 20rpx 20rpx 10rpx 20rpx;
		/* font-size: 32rpx; */
		font-weight: 700;
		color: #2d2d2d;

		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.card_content {
		padding: 10rpx 20px 20rpx 40rpx;
		/* font-size: 28rpx; */
		color: #6c6c6c;
	}

	.search-tabs {
		background-color: #fff;
		width: 90%;
		height: 60px;

		display: flex;
		align-items: center;
	}
</style>